<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:fmt="http://java.sun.com/jsp/jstl/fmt" xmlns:c="">
<head>
    <meta charset="UTF-8">
    <title>PetStore Management</title>
<!--    <link rel="Stylesheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
    <!--导入jquery-ui-->
    <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
    <link type="text/css" href="../js/jquery-ui.min.css" rel="stylesheet">
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    #Content {
        width: 100%;
        height: auto;
        color: #333;
        background-color: rgba(256,256,256,0.5);
        border-width: 0;
        position: relative;
        overflow: hidden;
    }
    a{
        display: block;
        text-decoration: none;
        color: #eaac00;
        font-weight: bold;
    }
    .Returnto{
        display: inline-block;
        float: left;
        position: absolute;
        top: 1ex;
        left: 2ex;
        height: 5ex;
        width: 50ex;
        background-image: url("../image/ReturntoManagementMainMenu.png");
        background-size: 100%;
        background-repeat: no-repeat;
        border-color: #eaac00;
        border-width: 0.4ex;
        border-style: solid;
    }
    table{
        display: block;
        /*position: absolute;*/
        /*top: 10ex;*/
        /*left: 10ex;*/
        margin-top: 10%;
        margin-left: 32%;
        width: 45ex;
        font-size: 3ex;
        background-color: #ffffff;
        border-color: #56832c;
        border-width: 1ex;
        border-style: solid;
        /*margin-bottom: 10ex;*/
    }
    table tr{
        height: 3ex;
        text-align: left;
    }
    table td{
        width: 10ex;
    }
    .images{
        height: 5ex;
        width: 5ex;
    }
    #search {
        width: 40%;
        height: 7ex;
        background-color: #ffffff;
        border-color: #56832c;
        border-width: 0.7ex;
        border-style: solid;
        text-align: center;
        color: #eaac00;
        position: absolute;
        display: inline-block;
        top: 1ex;
        left: 57ex;
    }

    #search input {
        float: left;
        position: absolute;
        border-width: .3ex .3ex .3ex .3ex;
        border-style: solid;
        border-color: #eaac00;
        background-color: #ffffff;
        color: #eaac00;
        height: 3ex;
        font-size: 3ex;
    }
    #search span{
        display: inline-block;
        float: left;
        position: absolute;
        font-size: 3ex;
    }
    h2{
        float: left;
        position: absolute;
        top: 5ex;
        left: 29.5ex;
        font-size: 5ex;
    }
    .ADDNEWPRODUCT{
        display: inline-block;
        float: left;
        margin-left: 80ex;
        margin-top: 2ex;
        margin-bottom: 3ex;
        height: 5ex;
        width: 40ex;
        background-image: url("../image/ADDNEWPRODUCT.png");
        background-size: 100%;
        background-repeat: no-repeat;
        border-color: #eaac00;
        border-width: 0.4ex;
        border-style: solid;
    }
    .RETURN{
        display: inline-block;
        float: left;
        margin-left: -126ex;
        margin-top: 6ex;
        margin-bottom: 3ex;
        width: 15ex;
        height: 5ex;
        background-image: url("../image/RETURN2.png");
        background-size: 100%;
        background-repeat: no-repeat;
        border-color: #eaac00;
        border-width: 0.4ex;
        border-style: solid;
    }
</style>
<body>
<div th:replace="manageCommon/managetop"></div>
</div>

<div id="Content">
    <a class="Returnto" href="/manage/main"></a>
<!--    <div id="search">-->
<!--        <div id="searchContent">-->
<!--            &lt;!&ndash;搜索&ndash;&gt;-->
<!--            <form action="" method="post" id="keyForm">-->
<!--                &lt;!&ndash;右侧搜索选择复选框&ndash;&gt;-->
<!--                <span style="left: 1ex;top: 1ex ">category:</span>-->
<!--                <input  style="left: 9.5ex;top: 0.8ex;width: 2ex" type="radio" name="select" id="category"/>-->
<!--                <span style="left: 13ex;top: 1ex">product:</span>-->
<!--                <input style="left: 20ex;top: 0.9ex;width: 2.1ex"type="radio" name="select" id="product"/>-->
<!--                &lt;!&ndash;开启自动补全功能autocomplete="on"&ndash;&gt;-->
<!--                <input  style="left: 25ex;top: 0.6ex;width: 18ex" id="searchText" type="text" name="keyword" size="14" />-->
<!--                <input style="left: 44ex;top: 1ex;width: 7ex"  type="button" name="searchProducts" value="Search" id="searchSubmit"/>-->
<!--            </form>-->
<!--        </div>-->
<!--    </div>-->
    <!--    category选择-->
    <div>
        <h2>Product Information</h2>
        <form>
            <table>
                <tr>
                    <th>&nbsp;&nbsp;&nbsp;&nbsp;</th>
                    <th>Product ID</th>
                    <th>Product Name</th>
                    <th>&nbsp;&nbsp;&nbsp;&nbsp;</th>
                    <th>&nbsp;&nbsp;&nbsp;&nbsp;</th>
                </tr>
                <tr th:each="product:${session.imageProductList}">
                    <td><img class="images" th:src="${product.description}"></td>
                    <td th:text="${product.productId}"></td>
                    <td th:text="${product.name}"></td>
                    <td><a th:onclick="intoItem('[[${product.productId}]]')">进入</a></td>
                    <td><a th:onclick="editProduct('[[${product.productId}]]')">修改</a></td>
                    <td><a th:onclick="deletProduct('[[${product.productId}]]')">删除</a></td>
                </tr>
            </table>
        </form>
        <a class="ADDNEWPRODUCT" th:href="@{'/manage/newProductForm'}"></a>
        <input class="RETURN" type="button" th:onclick="returnCategory()"/>
    </div>
    <script>
        function editCategory(categoryId){
            console.log(categoryId);
            var str=categoryId.split('"');
            location.href = "/manage/editCategory?categoryId="+str[1];
        }
        function intoItem(producid){
            var str1=producid.split('"');
            console.log(producid);
            location.href = "/manage/intoItemPage?productid="+str1[1];
        }
        function deletProduct(productid){
            var str2=productid.split('"');
            console.log(productid);
            location.href = "/manage/deleteProduct?productid="+str2[1];
        }
        function returnCategory(){
            location.href="/manage/intoPetManage";
        }
        function editProduct(productId){
            console.log(productId);
            var str=productId.split('"');
            location.href = "/manage/editProduct?productId="+str[1];
        }
    </script>
    <div th:replace="manageCommon/managebottom"></div>
</div>

</body>
</html>